/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass/reset";
@import "compass"; 
@import "WallopSlider.css";


* {
  @include box-sizing(border-box);
}

/* colors */
/* ========================================= */

$darkGrey : #212221;
$adWordsBlue: #4285f4;
$adWordsGreen: #38ad5c;
$adWordsYellow: #f4b400;
$adWordsRed: #ea3131;

$dttTextColor:#494232;
$dttBgColor:rgb(255,225,137);

$loonBgColor:#1e3950;
$loonTextColor:#e89e1d;

$compassBgColor:#00796B;

$adBgColor:#546e7a;

$illosBgColor:#795548;
$illosTextColor:#80deea;

$demoBgColor:#7E57C2;
$demoTextColor:#CDDC39;

/* fonts */
/* ========================================= */

body{
	font-family: 'Montserrat', sans-serif;
	-webkit-font-smoothing: antialiased;
}


@font-face{
font-family:'Mono Social Icons Font'; 
src:url('/fonts/MonoSocialIconsFont-1.10.eot');
src:url('/fonts/MonoSocialIconsFont-1.10.eot') format('embedded-opentype'),
  url('/fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
  url('/fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
  url('/fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
font-weight:normal;
font-style:normal;
}


@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.symbol, a.symbol:before {
    font-family: 'Mono Social Icons Font';
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-size:45px;
}

a.symbol:before {
    content: attr(title);
    margin-right: 0.3em;
    font-size: 130%;
}


@font-face{
font-family:Batch; 
src:url('fonts/batch.eot');
src:url('fonts/batch.eot?#iefix') format('embedded-opentype'),
  url('fonts/batch.woff') format('woff'),
  url('fonts/batch.ttf') format('truetype'),
  url('fonts/batch.svg#batchregular') format('svg');
font-weight:normal;
font-style:normal;
}

.batch {
	font-family:"Batch"!important; 
	font-size:16px;
	line-height:1;
	display:inline-block;
	font-weight:100!important;
}

/* type */
/* ========================================= */

h1{
	font-size: 34px;
	font-weight: 400;
	line-height: 40px;
	margin-bottom: 30px;
	color:#fff;

	&.dark{
		color:#333;
	}
}

h2{
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	margin-bottom: 30px;
	color:#fff;
}

h3{
	font-size: 15px;
	line-height: 24px;
	color: #212121;
	font-weight: 500;
	margin-bottom: 30px;
}


h5{
	font-size:16px;
	color:#686868;
	margin:0 0 15px 0;
	font-weight:400;
}

h6{
	font-size:12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin:0 0 5px 0;
}

p.lead{
	font-size:16px;
	line-height:24px;
	color:#838383;
	font-weight:200;
}

p{
	font-size:15px;
	line-height:18px;
	margin:0 0 20px 0;
	color:#333;
	font: 16px/25px 'Open Sans',arial,sans-serif;
	font-weight: 400;
}

a{
	color:#fff;
	text-decoration:none;
}

strong{
	font-weight:bold;
}

.help{
	padding-left:30px;
	background:url(../img/icon-help2.png) 0 0 no-repeat;
}
/* don't over think it grids */
/* ========================================= */
$pad: 40px;

.grid {
  margin: 0 0 $pad 0;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}



/* common */
/* ========================================= */
.wrapper{
	width:900px;
	margin:0 auto;
}

.pull-right{
	float:right;
}


/* Header */
/* ========================================= */

header{
	width: 100%;
	height: 60px;
	border-bottom: 1px solid #2b2c3e;
	background-color: #38363a;
	z-index: 900;
}

nav {
	width: 100%;
	padding: 0 10px;
	max-width: 980px;
	margin: 0 auto;
	ul{
		display: block;
		padding-left: 30px;
		border-left: 1px solid #2b2c3e;
		&:before{
			content: "";
			display: table;
		}
		&:after{
			clear: both;
		}
	}
	li{
		float:left;
	}
	ul.main{
		float:left;
		li{margin: 0 40px 0 0;}
		a{
			@include transition(all 300ms cubic-bezier(0.4, 0.0, 0.2, 1));
			position: relative;
			line-height:60px;
			text-decoration: none;
			color: rgba(255,255,255,0.4);
			text-transform:uppercase;
			font-size:13px;
			span{
				@include transition(all 300ms cubic-bezier(0.175,0.885,0.320,1.275));
				overflow:hidden;
			  position:absolute;
			  left:0;
			  bottom:-10px;
			  display:block;
			  width:0;
			  height:0px;
			  max-height:5px !important;
			  background:#ffffff;
			}
			&:hover{
				color:#ffffff;
				span{
					width:100%;
					height:5px;
				}
			}
		}
	}
	ul.social{
		float: right;
		padding-left: 0;
		border-left: 1px solid #2b2c3e;
		a{
			display:block;
		  width:60px;
		  height:60px;
		  border-right:1px solid #2b2c3e;
		  text-decoration:none;
		  outline:none;
		  text-align:center;
		  color: rgba(255,255,255,0.4);
		  @include transition(all 300ms cubic-bezier(0.4, 0.0, 0.2, 1));

		  .symbol{
		  	line-height:60px;
		  }
		  &:hover{
		  	color:#fff;
		  }
		}
	}
	.logo{
		@include transition(all 300ms cubic-bezier(0.4, 0.0, 0.2, 1));
		float: left;
		display: inline-block;
		line-height:60px;
		outline: none;
		text-decoration: none;
		font-size:20px;
		margin-right:87px;
		letter-spacing: 1px;
		font-weight:500;
		color: rgba(255,255,255,0.8);
		text-transform:uppercase;
		font-size:14px;
	}

	&:before{
		content: "";
		display: table;
	}
}


/* very section */
/* ========================================= */

#hero{
	background:#38363a;
	padding:120px 0 60px;
}

article{
	width: 100%;
	padding: 0 10px;
	max-width: 980px;
	margin: 0 auto;
	margin-bottom: 56px;
	overflow:hidden;
}

#hero figure{
	overflow: hidden;
	position: relative;
	float: left;
	width: 120px;
	height: 120px;
	margin: 0 68px 0 0;
	img{
		width:120px;
		height:120px;
		@include border-radius(60px);
	}
}
#hero aside{
	float: left;
	width: 720px;
}
#hero h2{
	font-weight:500;
	padding-top:20px;
	font-size:30px;
	line-height:40px;
}


#achievements{
	margin:0 auto;
	width:980px;
	overflow:hidden;

	>div{
		width:245px;
		height:245px;
		float:left;
	}

	.history{
		background:#ff5722;
	}
	.gthanks{
		background:#ffb300;
	}
	.spotbonus{
		background:#009688;
	}
	.projects{
		background:#3f51b5;
	}

	&:before{
		content: "";
		display: table;
	}
	&:after{
		clear:both;
	}
}


.meta{
		display:inline-block;
		text-align:left;
		padding:20px;
		left:-1px;
		position:relative;
		strong{
			width:60px;
			text-align:right;
			padding-right:10px;
			display:inline-block;
		}
		span{
			display:block;
			font-size:12px;
			margin:5px 0;
			overflow:hidden;
		}
	}
	.bars{
		display:inline-block;
		margin-left:10px;
		width:30px;
		text-align:right;
		float:right;
		i{
			display:inline-block;
			width:3px;
			height:10px;
			margin:0 3px 0 0;
			background:#000;
			opacity:0.4;

			&:nth-child(1){
				height:3px;
			}
			&:nth-child(2){
				height:6px;
			}
			&:nth-child(3){
				height:9px;
			}
			&:nth-child(4){
				height:12px;
			}
		}
	}
	.xl .bars i{opacity:1}
	.l .bars i:nth-child(1),
	.l .bars i:nth-child(2),
	.l .bars i:nth-child(3){opacity:1}
	.m .bars i:nth-child(1),
	.m .bars i:nth-child(2){opacity:1}
	.s .bars i:nth-child(1){opacity:1}


#project-details{
	text-align:center;
	padding-bottom:100px;
	a.simple{border-bottom:1px dotted #000;transition:all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)}
	a.simple:hover{background:rgba(0,0,0,0.05);}
	header{
		width:980px;
		margin:0 auto;
		padding:100px 0;
		border:none;
		background:transparent;
		height:auto;
	}

	h2{
		font-size: 42px;
		text-align: center;
		line-height: 48px;
		margin:0 0 15px 0;
		max-width:520px;
		display:inline-block;
	}
	h3{
		font-size: 30px;
		text-align: center;
		line-height: 35px;
		margin:0 0 15px 0;
		max-width:520px;
		display:inline-block;
	}
	.links{
		padding-top:50px;
		position:absolute;
		top:100px;
		left:50%;
		margin-left:-500px;
		width:200px;
		a{
			display:inline-block;
			text-align:center;
			font-size:12px;
			color:#000;
			margin:0px 15px;
			width:100px;
			min-height:100px;
			border:none;
			@include opacity(0.5);
			img{display:block; margin:0 auto; width:50px;}
			&:hover{
				@include opacity(1);
			}
		}
		&:after{
		content: "";
		display: inline-block;
		position: relative;
		height: 0;
		width: 100%;
		}
	}
	.credits{
		border-top:1px solid rgba(0,0,0,0.4);
		display:inline-block;
		clear:both;
		font-size:0;
	}
	.team{
		font-size:11px;
		display:inline-block;
		padding:0 40px 0 0;
		vertical-align:top;
		text-align:left;
		padding:20px;
		border-right:1px solid rgba(0,0,0,0.4);
		li{
			display:block;
			margin:5px 0px;
			strong{
				width:80px;
				text-align:right;
				padding-right:10px;
				display:inline-block;
			}
		}
	}
	
	[class*='colz-']{
		text-align:left;
		max-width:600px;
	}
	.colz-2{
		-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	}
	.column{
		padding:0 20px;
	}
	p.lead{
		font-size: 24px;
		text-align: center;
		line-height: 32px;
		max-width:520px;
		margin:0 auto;
		position: relative;
		z-index:2;
		font-weight:400;
	}
	p{
		max-width:520px;
		margin:0 auto;
	}
	article{
		position:relative;
		padding:100px 0;
		overflow:visible;
	}
	article hgroup *{
		z-index:1;
		position:relative;
	}
	article img{z-index:2; position:relative}
	.value{
		margin:100px auto;
	}
	.value  .underlay{
		position:absolute;
		width:600px;
		color:#fff;
		font-size:500px;
		margin-left:-300px;
		text-align:center!important;
		left:50%;
		z-index:0;
		top:-40px;
		font-weight:200;
		font-family:'RobotoDraft';
		em{
			font-size:200px;
			font-weight:800;
			vertical-align: super;
			letter-spacing:-20px;
		}
	}
	.process{
		margin:0 auto;
		padding:0 0 100px 0;
		&:after{
			display:block;
			content:'';
			position:absolute;
			left:50%;
			width:1px;
			height:100%;
			background:#000;
			top:0;
		}
		&:before{
			display:block;
			content:'';
			position:absolute;
			left:50%;
			width:10px;
			height:10px;
			border-radius:50%;
			background:#000;
			top:-5px;
			margin-left:-5px;
			z-index:10;
		}
		&.right{
			hgroup *{text-align:left;}
			hgroup{
				max-width:350px;
				left:50%;
				width:500px;
				text-align:left;
				margin-left:20px;
				padding-bottom:40px;
				position:relative;
			}
		}
		&.left {
			hgroup *{text-align:right;}
			hgroup{
			max-width:350px;
			width:500px;
			left:50%;
			margin-left:-370px;
			text-align:right;
			padding-bottom:40px;
			position:relative;
			}
		}
		&.middle{
			hgroup{
				padding-top:20px;
				z-index:2;
				position:relative;
			}
			hgroup *{background:#fff;}
				hgroup h6{margin-bottom:0;}
		}
		&:last-of-type{
			padding-bottom:0;
		}
		ul{
			li{
				margin:5px 0 5px 20px;
				font-size:14px;
				list-style:square;
			}
		}
	}
}


.dtt #content{
	background:$dttBgColor;
}
#project-details.dtt{
	header{
		h6,h2{color:$dttTextColor;}
	}
	.team, .meta{
		color:$dttTextColor;
	}
	.bars i{background:$dttTextColor}
	a{color:#000;}
	p, h3{color:$dttTextColor}
	.quotes > div{background:$dttBgColor; border-color:$dttTextColor}
	.middle hgroup *{background:$dttBgColor;}
	.img-wrapper{
		background:$dttBgColor;}
}

.loon #content{
	background:$loonBgColor;
}
#project-details.loon{
	.links a{color:#fff;}
	header{
		h6,h2{color:#fff;}
		h2{color:$loonTextColor}
	}
	.team, .meta{
		color:#fff;
	}
	.bars i{background:$loonTextColor}
	a{color:#000;}
	h6, h3{color:$loonTextColor}
	p{color:#fff}
	.quotes > div{background:$loonBgColor; border-color:$loonTextColor}
	.middle hgroup *{background:$loonBgColor;}
	.img-wrapper{
		background:$loonBgColor;}

}

.compass #content{
	background:$compassBgColor;
}
#project-details.compass{
	.links a{color:#fff;}
	.underlay{color:rgba(0,0,0,0.2)}
	header{
		h6,h2{color:#fff;}
		h2{color:$loonTextColor}
	}
	.team, .meta{
		color:#fff;
	}
	.bars i{background:$loonTextColor}
	a{color:#000;}
	h6, h3{color:$loonTextColor}
	p{color:#fff}
	.quotes > div{background:$compassBgColor; border-color:$loonTextColor}
	.middle hgroup *{background:$compassBgColor;}
	.img-wrapper{
		background:$compassBgColor;}

}

.ad-templates #content{
	background:$adBgColor;
}
#project-details.ad-templates{
	.links a{color:#fff;}
	.underlay{color:rgba(0,0,0,0.2)}
	header{
		h6,h2{color:#fff;}
		h2{color:$loonTextColor}
	}
	.team, .meta{
		color:#fff;
	}
	.bars i{background:$loonTextColor}
	a{color:#000;}
	h6, h3{color:$loonTextColor}
	p{color:#fff}
	.quotes > div{background:$adBgColor; border-color:$loonTextColor}
	.middle hgroup *{background:$adBgColor;}
	.img-wrapper{
		background:#fff;}
		.wallop-slider p{
			background:$adBgColor;
		}
}


.illos #content{
	background:$illosBgColor;
}
#project-details.illos{
	.links a{color:#fff;}
	.underlay{color:rgba(0,0,0,0.2)}
	header{
		h6,h2{color:#fff;}
		h2{color:$illosTextColor}
	}
	.team, .meta{
		color:#fff;
	}
	.bars i{background:$illosTextColor}
	a{color:#000;}
	h6, h3{color:$illosTextColor}
	p{color:#fff}
	.quotes > div{background:$illosBgColor; border-color:$illosTextColor}
	.middle hgroup *{background:$illosBgColor;}
	.img-wrapper{
		background:#fff;}
		.wallop-slider p{
			background:$illosBgColor;
		}
}

.demo #content{
	background:$demoBgColor;
}
#project-details.demo{
	.links a{color:#fff;}
	.underlay{color:rgba(0,0,0,0.2)}
	header{
		h6,h2{color:#fff;}
		h2{color:$demoTextColor}
	}
	.team, .meta{
		color:#fff;
	}
	.bars i{background:$demoTextColor}
	a{color:#000;}
	h6, h3{color:$demoTextColor}
	p{color:#fff}
	.quotes > div{background:$demoBgColor; border-color:$demoTextColor}
	.middle hgroup *{background:$demoBgColor;}
	.img-wrapper{
		background:#fff;}
		.wallop-slider p{
			background:$demoBgColor;
		}
}



.wallop-slider__item--current{position:relative;z-index:100}
.wallop-slider__list{overflow:visible}
.wallop-slider {
	background:url(/img/macbook.png) 50% 50% no-repeat;
	height:578px;
	width:100%;
	text-align:center;
	z-index:2;
	position:relative;
	.wallop-slider__item {
		padding:39px 0 0 130px;
		margin:0!important;
	}
	.img-wrapper{
		width:722px;
		height:450px;
		background:rgba(0,0,0,0.1);
		overflow:auto;
		img{
			width:100%;
			position: static!important;
		}
	}
	p{
		top:100%;
		position:absolute!important;
		text-align:center;
		z-index:100!important;
		margin-top:120px!important;
		left:50%;
		margin-left:-400px!important;
		width:800px;
		max-width:800px!important;
		font-style:italic;
		font-size:13px;
		line-height:18px;
	}
	.btn_prev, .btn_next{
		width:60px;
		height:60px;
		@include border-radius(50%);
		background:#000;
		@include opacity(0.5);
		border:none;
		font-size:30px;
		line-height:60px!important;
		padding:0!important;
		color:#fff!important;
		text-align:center!important;
		cursor:pointer;
		position:absolute!important;
		top:50%;
		border:none!important;
		margin-top:-30px!important;
		z-index:1000000;
		@include transition(all 300ms cubic-bezier(0.4, 0.0, 0.2, 1));
	
		&:hover{
			opacity:1;
			background:#000!important;
			@include transform(scale(1.1));
		}
		&:disabled{opacity:0.1!important}

		&:focus, &:active{
			outline: none;
			border: none;
		}
	}
	.btn_prev{
		left:0;
	}
	.btn_next{
		right:0;
	}

}

.quotes{
	margin:50px auto;
	max-width:980px;
	display:inline-block;
	position:relative;
	z-index:2;
}

.quotes > div{
	border-top:1px solid rgba(0,0,0,0.2);
	border-bottom:1px solid rgba(0,0,0,0.2);
	height:130px;
	padding:20px;
	width:200px;
	height:140px;
	margin:0 20px;
	float:left;
	em{
		font-size:14px;
		font-style:normal;
		line-height:18px;
		display:block;
		margin-top:15px;
		text-align:right;
		opacity:0.5;
	}
	
	p{
		font-family:serif;
		font-style:italic;
		font-size:20px;
	 @include vertical-align;
	}

	&.flex{
		width:auto;
		height:auto;
		margin:0 auto;
		max-width:500px;
		max-height:500px;
		p{
			top:auto;
			transform:none;
		}
	}
}



footer{
	padding:100px 0;
	background:#3f3f3b;
	a{color:$adWordsBlue;}
	p.lead{
		color:#fff;
		margin:0 0 50px 0;
	}
	p.light{
		font-size:13px;
		color:#68798e;
		font-family: 'Roboto Condensed', sans-serif;

	}
	img.logo{
		float:left;
		position:relative;
		top:-8px;
	}
}


#projects{
	height:300px;
	display: flex;
	overflow: auto;
	position: absolute;
	width: 100%;
	background:#38363a;
	h2{
		font-size:25px;
		font-weight:bold;
		line-height:30px;
		color:rgba(0,0,0,0.5)!important;
	}
	a{
		display:block;
		height:100%;
		background:#ccc;
		color:#fff;
		-webkit-box-sizing:border-box;
		padding:20px;
		position:relative;
		min-width: 250px;
		width:250px;
		z-index:1;
		@include transition(all 300ms cubic-bezier(0.4, 0.0, 0.2, 1));
			


		span{
			position: absolute;;
			display: block;	
			bottom:30px;
			left:0;
			width:100%;
			text-align:center;
			text-transform: uppercase;
			font-size:12px;
			@include transition(all 300ms cubic-bezier(0.4, 0.0, 0.2, 1));
			transform:scale(0);
			opacity:0;
			transition-delay:0.2s;
		}

		&:hover span{
			transform:scale(1);
			opacity:1;
		}
		
		&.compass{
			background:$compassBgColor;

		}
		&.dtt{
			background:$dttBgColor;
			h2{color:$dttTextColor;}
		}
		&.illos{
			background:$illosBgColor;
			h2{color:$illosTextColor;}
		}
		&.loon{
			background:$loonBgColor;
			h2{color:$loonTextColor;}
		}
		&.demo{
			background:$demoBgColor;
			h2{color:$demoTextColor;}
		}
		&.ads{
			background:$adBgColor;
			h2{color:$loonTextColor;}
		}
		
	}
}

a.btn{
	display:inline-block;
	margin:0 auto;
	height:30px;
	@include border-radius(15px);
	line-height:30px;
	text-align:center;
	padding:0 15px;
	text-transform: uppercase;
	color:#fff!important;
	font-weight:bold;
	background:#000;
	border:none;
	font-size:14px;
	@include transition(all 300ms cubic-bezier(0.4, 0.0, 0.2, 1));
	position: relative;
	z-index:2;	
	&:hover{
		background:#fff;
		color:#000!important;
		@include transform(scale(1.2));
	}
}

#experience{
	float:left;
	width:70%;
}
aside{
	float:right;
	width:30%;
	padding-left:60px;
}
#resume{
	padding-top:400px;
	background:#fff;
	width:980px;
	margin:0 auto;

	 li {
		margin-top: 21px;
		line-height: 20px;
	}
	.left{
		width:30%;
		padding-right:48px;
		float:left;

	}
	.right{
		width:65%;
		padding-left:48px;
		float:left;
	}
	h3.title {
		font-weight: 700;
		color: rgba(0,0,0,0.88);
		font-size: 14px;
		margin-bottom: 4px;
	}
	.subtitle{
		font-weight: 600;
		color: rgba(0,0,0,0.88);
		font-size: 14px;
		margin-bottom: 4px;
	}
	.description{
		font-size: 14px;
		color: rgba(0,0,0,0.64) !important;
	}
	.location, .time{
		color:rgba(0,0,0,0.64);
		font-weight: 400;
		font-size: 14px;
		margin-bottom: 4px;
	}
	.period{
		color:rgba(0,0,0,0.4);
	}
	a{
		color:#3b78e7;
		text-transform: uppercase;
		font-size:12px
	}
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

